<template>
  <scroll-view class="scroll-view" scroll-y enable-back-to-top refresher-enabled :refresher-triggered="isTriggered"
    @refresherrefresh="onRefresherrefresh">
    <!-- 轮播图 -->
    <UFastSwiper :list="bannerList" />
    <view class="top-icons">
      <view class="top-icon-item" v-for="(item, index) in homeIconList.filter(item => item.iconType == 1)" :key="index"
        @tap="navigateTo(item)">
        <image class="top-icon-item-img" :src="item.imgUrl" mode="scaleToFill" />
        <view class="top-icon-item-name">{{ item.name }}</view>
      </view>
    </view>
    <view class="page-gap"></view>
    <!-- 语音模拟 -->
    <view class="voice-mock">
      <view class="voice-mock-left">
        <view class="voice-mock-title">科三语音模拟</view>
        <view class="voice-mock-desc">提前熟悉掌握语音内容与技巧</view>
        <navigator url="/pagesCourse/voiceMock/voiceMock" open-type="navigate" hover-class="navigator-hover">
          <view class="voice-mock-btn">灯光语音<text class="icon-xiang-you-fill"></text></view>
        </navigator>
      </view>
      <image class="voice-mock-img" src="@/static/images/exam/exam_voice_mock.png" mode="widthFix" />
    </view>
    <view class="page-gap"></view>

    <!-- 考试视频 -->
    <view class="exam-videos">
      <view class="exam-videos-title">
        {{ useBaseTypeName(baseType) }}考试项目讲解
      </view>
      <view class="exam-video-items">
        <view class="exam-video-item" v-for="(item, index) in courseVideoExplainList" :key="index"
          @tap="toExamVideo(item.baseType!, item.id!)">
          <image class="exam-video-item-cover" :src="item.coverUrl" mode="scaleToFill" />
          <view class="exam-video-item-name">{{ item.title }}</view>
          <view class="exam-video-play-btn icon-play-filled"></view>
        </view>
      </view>
    </view>
    <view class="page-gap"></view>
    <view class="down-icons">
      <view class="down-icons-title">专家讲解操作要点</view>
      <view class="down-icon-items">
        <view class="down-icon-item" v-for="(item, index) in homeIconList.filter(item => item.iconType == 2)"
          :key="index" @tap="navigateTo(item)">
          <image class="down-icon-item-img" :src="item.imgUrl" mode="scaleToFill" />
          <view class="down-icon-item-name">{{ item.name }}</view>
        </view>
      </view>
    </view>
    <view class="page-gap"></view>
    <!-- 交管12123 -->
    <Jg12123 />
    <view class="page-gap"></view>
    <!-- 好有分享 -->
    <UFastShare />
  </scroll-view>
</template>

<script lang="ts" setup>
  import { ref, computed, onMounted, watch } from 'vue'
  import type { HomeIconVo } from '@/api/home/types'
  import type { CourseVideoExplainVo } from '@/api/course/types'

  import { useBaseTypeName, useBaseInfo } from '@/composables/LearnBase'
  import { getCourseVideoExplainListApi } from '@/api/course'

  import Jg12123 from './Jg12123.vue'

  // 自定义属性
  const prosp = defineProps({
    /* 题库类型 */
    baseType: {
      type: String,
      required: true,
    },
    bannerList: {
      type: Array<BannerItem>,
      required: true,
    },
    homeIconList: {
      type: Array<HomeIconVo>,
      required: true,
    }
  })

  // 当前下拉刷新状态
  const isTriggered = ref(false)
  // 题库信息
  const baseInfo = computed(() => useBaseInfo())
  // 课程视频讲解列表
  const courseVideoExplainList = ref<CourseVideoExplainVo[]>([])
  onMounted(async () => {
    getCourseVideoExplainList(prosp.baseType)
  })
  watch(() => baseInfo.value.driveType, () => {
    getCourseVideoExplainList(prosp.baseType)

  })
  /**
   *获取视频讲解列表
   * @param driveType
   * @param baseType
   */
  const getCourseVideoExplainList = async (baseType: string) => {
    let driveType = baseInfo.value.driveType!
    let result = await getCourseVideoExplainListApi(driveType, baseType)
    courseVideoExplainList.value = result.data
  }
  // 自定义下拉刷新被触发
  const onRefresherrefresh = async () => {
    // 开始动画
    isTriggered.value = true
    await getCourseVideoExplainList(prosp.baseType)
    isTriggered.value = false
  }

  /**
   *跳转页面
   * @param homeIconItem
   */
  const navigateTo = (homeIconItem: HomeIconVo) => {
    if (homeIconItem.pathType == 1) {
      uni.navigateTo({
        url: homeIconItem.path!
      })
    }
    else if (homeIconItem.pathType == 2) {
      let htmPageUrl = homeIconItem.path
      htmPageUrl = encodeURIComponent(htmPageUrl!)
      let htmlPageTitle = homeIconItem.name
      uni.navigateTo({
        url: `/pages/webView/webView?htmlPageTitle=${htmlPageTitle}&htmPageUrl=${htmPageUrl}`
      })
    }
  }
  /**
   * 跳转到考试视频
   * @param baseType
   * @param id
   */
  const toExamVideo = (baseType: string, id: string | number) => {
    uni.navigateTo({
      url: `/pagesCourse/videoExplain/videoExplain?baseType=${baseType}&id=${id}`
    })

  }
</script>

<style lang="scss" scoped>
  .scroll-view {
    display: flex;
    flex-direction: column;
  }

  .top-icons {
    display: flex;
    justify-content: space-around;
    margin-top: 40rpx;
    height: 180rpx;

    .top-icon-item {
      display: flex;
      flex-direction: column;
      justify-content: center;

      align-items: center;

      .top-icon-item-img {
        width: 68rpx;
        height: 68rpx;
      }

      .top-icon-item-name {
        margin-top: 20rpx;
        font-size: 30rpx;
        color: #1e1e1e;
      }
    }
  }

  // 语音模拟
  .voice-mock {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 60rpx;

    .voice-mock-left {
      .voice-mock-title {
        font-size: 26rpx;
        color: #222222;
        font-weight: bold;
      }

      .voice-mock-desc {
        margin-top: 20rpx;
        font-size: 22rpx;
        color: #8d8d8d;
      }

      .voice-mock-btn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 30rpx;
        width: 150rpx;
        height: 42rpx;
        color: #ffffff;
        font-size: 21rpx;
        background-color: #22c264;
        border-radius: 21rpx;

        .icon-xiang-you-fill {
          margin-left: 10rpx;
        }
      }
    }

    .voice-mock-img {
      width: 248rpx;
    }
  }

  // 考试视频
  .exam-videos {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 40rpx 24rpx;

    .exam-videos-title {
      font-size: 36rpx;
      color: #1a191f;
      font-weight: bold;
    }

    .exam-video-items {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      align-content: space-between;

      .exam-video-item {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 40rpx;

        .exam-video-item-cover {
          width: 330rpx;
          height: 200rpx;
          border-radius: 7rpx;
        }

        .exam-video-item-name {
          margin-top: 21rpx;
          font-size: 28rpx;
          color: #1e1e1e;
        }

        .exam-video-play-btn {
          position: absolute;
          left: 35%;
          top: 25%;
          z-index: 2;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(0, 0, 0, .3);
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          color: #fff;
          font-size: 40rpx;

          &::before {
            margin-left: 10rpx;
          }
        }
      }
    }

  }

  .down-icons {
    display: flex;
    flex-direction: column;
    padding: 40rpx 24rpx;

    .down-icons-title {
      font-size: 36rpx;
      color: #1a191f;
      font-weight: bold;
    }

    .down-icon-items {
      display: flex;
      flex-wrap: wrap;
      justify-content: start;

      .down-icon-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 40rpx;
        width: 140rpx;


        .down-icon-item-img {
          width: 68rpx;
          height: 68rpx;
        }

        .down-icon-item-name {
          margin-top: 17rpx;
          font-size: 24rpx;
          color: #1e1e1e;
        }
      }
    }

  }

  .page-gap {
    height: 20rpx;
    background-color: #f7f7f7;


  }


</style>
